<template>
  <div class="facade-demo">
    <h1>外观模式示例 - 家庭影院系统</h1>
    
    <div class="controls">
      <button @click="watchMovie" :disabled="isMovieMode">开启电影模式</button>
      <button @click="listenToMusic" :disabled="isMusicMode">开启音乐模式</button>
      <button @click="endMovie" :disabled="!isMovieMode && !isMusicMode">关闭所有设备</button>
    </div>

    <div class="status-panel">
      <h2>系统状态</h2>
      <div class="status-list">
        <div v-for="(action, index) in currentActions" :key="index" class="status-item">
          {{ action }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { HomeTheaterFacade } from '../patterns/Facade';

const homeTheater = new HomeTheaterFacade();
const currentActions = ref<string[]>([]);
const isMovieMode = ref(false);
const isMusicMode = ref(false);

const watchMovie = () => {
  currentActions.value = homeTheater.watchMovie();
  isMovieMode.value = true;
  isMusicMode.value = false;
};

const listenToMusic = () => {
  currentActions.value = homeTheater.listenToMusic();
  isMovieMode.value = false;
  isMusicMode.value = true;
};

const endMovie = () => {
  currentActions.value = homeTheater.endMovie();
  isMovieMode.value = false;
  isMusicMode.value = false;
};
</script>

<style scoped>
.facade-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  transition: background-color 0.3s;
}

button:hover:not(:disabled) {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.status-panel {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.status-list {
  margin-top: 15px;
}

.status-item {
  padding: 10px;
  margin: 5px 0;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style> 